<template>
  <div style="padding:20px;width:100%">
    <div class="clearfix">
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">商品名称</div>
        <el-input placeholder="请输入商品名称" v-model="goodName" clearable></el-input>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">所属商城</div>
        <el-select v-model="menuFour" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in sourceList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">商品类别</div>
        <el-select v-model="menuOne" placeholder="请选择" class="c-box-flex" clearable>
          <el-option :label="obj.name" :value="obj.id" v-for="obj in typeList" :key="obj.id"></el-option>
        </el-select>
      </div>
      <div class="fl c-flex c-a-c mr10 mb15">
        <div class="mr10">状态</div>
        <el-select v-model="goodsState" placeholder="请选择" class="c-box-flex" clearable>
          <el-option
            :label="obj.name"
            :value="obj.value"
            v-for="obj in goodsStateList"
            :key="obj.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="c-flex">
      <div class="c-box-flex">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="$router.push({path:'/addPeripheral'})">新增</el-button>
        
      </div>
    </div>
    <div ref="table" class="mt15">
      <el-table :data="List" style="width: 100%" :max-height="maxHeight" border>
        <el-table-column prop="goodsNo" label="商品编号"></el-table-column>
        <el-table-column prop="fromName" label="所属商城"></el-table-column>
        <el-table-column prop="gtype" label="商品类别"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsImg" label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg.split(',')[0]" alt style="width:100%;height:auto">
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存(件)">
          <template slot-scope="scope">
            <div class="blue cursor" @click="setId(scope.row.goodsNo)">{{scope.row.stock}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="baseAmount" label="成本价（元）"></el-table-column>
        <el-table-column prop="price" label="标价（元）"></el-table-column>
        <el-table-column prop="truthAmount" label="售价（元）"></el-table-column>
        <el-table-column prop="vipAmount" label="会员价（元）"></el-table-column>
        <el-table-column prop="truthSales" label="商品销量（件）"></el-table-column>
        <el-table-column prop="salesAmount" label="销售总额(元)"></el-table-column>
        <el-table-column prop="goodsState" label="状态">
          <template slot-scope="scope">
            <div v-for="obj in goodsStateList" :key="obj.value">
              <div v-if="obj.value==scope.row.goodsState">{{obj.name}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="paymentWay" label="操作" width="160px" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                size="mini"
                v-if="scope.row.goodsState=='OFFLINE'"
                @click="$router.push({path:'/addPeripheral?id='+scope.row.id})"
              >编辑</el-button>
              <el-button
                type="primary"
                size="mini"
                v-if="scope.row.goodsState=='OFFLINE'"
                @click="setGoodsState(scope.row.id,'ONLINE')"
              >上架</el-button>
              <el-button
                type="danger"
                size="mini"
                v-if="scope.row.goodsState=='ONLINE'||scope.row.goodsState=='ZERO'"
                @click="setGoodsState(scope.row.id,'OFFLINE')"
              >下架</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt20 c-flex">
        <div class="c-box-flex vh"></div>
        <el-pagination
          @size-change="setPageSize"
          @current-change="setPage"
          :current-page="currentPage"
          :page-sizes="[20, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>

      <el-dialog title="销售详情" :visible.sync="dialogVisible" width="50%">
        <div ref="table">
          <el-table :data="orderList" style="width: 100%" max-height="600" border>
            <el-table-column prop="typeName" label=" 规格名称"></el-table-column>
            <el-table-column prop="baseAmount" label="成本价(元)"></el-table-column>
            <el-table-column prop="truthAmount" label="售价(元)"></el-table-column>
            <el-table-column prop="truthSales" label="实际销量(件)"></el-table-column>
            <el-table-column prop="salesAmount" label="销售总额(元)"></el-table-column>
            <el-table-column prop="stock" label="库存(件)"></el-table-column>
          </el-table>
        </div>
        <div class="mt20 c-flex">
          <div class="c-box-flex vh"></div>
          <el-pagination
            @current-change="orderSetPage"
            :current-page="orderCurrentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="orderPageTotal"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //列表相关
      List: [],
      pageTotal: null,
      currentPage: 1,
      pageSize: 20,
      maxHeight: null,
      time: [],
      orderCurrentPage: 1,
      orderPageTotal: null,
      dialogVisible: false,
      menuOne: null,
      menuFour: null,
      goodsState: null,
      goodsNo: null,
      typeList: [],
      sourceList: [],
      orderList: [],
      orderNumber: null,
      goodName: null,
      goodsStateList: [
        {
          value: "ONLINE",
          name: "销售中"
        },
        {
          value: "OFFLINE",
          name: "已下架"
        },
        {
          value: "ZERO",
          name: "售罄"
        }
      ],
      goodsNo: null
    };
  },
  mounted() {
    this.maxHeight = window.innerHeight - this.$refs.table.offsetTop - 100;
    this.getList(this.currentPage, this.pageSize);
    this.getsupplierId(44, "typeList"); //类别
    this.getsupplierId(70, "sourceList"); //来源
  },

  methods: {
    getList(currentPage, pageSize) {
      this.$axios
        .get("/spGoods/mearchlist", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            menuOne: this.menuOne,
            menuFour: this.menuFour,
            goodsState: this.goodsState ? this.goodsState : null,
            goodName: this.goodName
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this.List = res.data.data.list;
            this.pageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getsupplierId(id, name) {
      //供应商
      this.$axios
        .get("/shop/classify/classifyMenuList", {
          params: {
            id: id
          }
        })
        .then(res => {
          if ((res.data.code = 200)) {
            this[name] = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //分页
    setPage(currentPage) {
      this.currentPage = currentPage;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //分页大小
    setPageSize(v) {
      this.currentPage = 1;
      this.pageSize = v;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    },
    orderSetPage(orderCurrentPage) {
      this.orderCurrentPage = orderCurrentPage;
      this.$nextTick(() => {
        this.list(this.orderCurrentPage, 10, this.goodsNo);
      });
    },

    setId(id) {
      this.goodsNo = id;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.list(this.orderCurrentPage, 10, this.goodsNo);
      });
    },
    list(currentPage, pageSize, goodsNo) {
      this.$axios
        .get("/spGoodsSpec/list", {
          params: {
            pageNum: currentPage,
            pageSize: pageSize,
            goodsNo: goodsNo
          }
        })
        .then(res => {
          console.log(res);
          if ((res.data.code = 200)) {
            this.orderList = res.data.data.list;
            this.orderPageTotal = res.data.data.total;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    setGoodsState(id, goodsState) {
      this.$axios
        .get("spGoods/line", {
          params: {
            goodsId: id,
            goodsState: goodsState
          }
        })
        .then(res => {
          this.currentPage = 1;
          this.$nextTick(() => {
            this.getList(this.currentPage, this.pageSize);
          });
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    reset() {
      this.menuOne = null;
      this.menuFour = null;
      this.goodsState = null;
      this.goodName = null;
      this.currentPage = 1;
      this.$nextTick(() => {
        this.getList(this.currentPage, this.pageSize);
      });
    }
  }
};
</script>
<style lang="less">
.clearfix {
  .el-input {
    width: 170px !important;
  }
}
</style>
